<template>
  <page>
    <div slot="header" class="flex flex-wrap">
      <a-input allowClear v-model="keyWords.screenKeywords" @keydown.enter="fetchData" placeholder="按关键字搜索" class="max-w-300 mr-20 mb-3">
        <a-icon slot="prefix" type="search" />
      </a-input>
      <a-input allowClear v-model="keyWords.filterKeywords" @keydown.enter="fetchData" placeholder="按关键字过滤" class="max-w-300 mr-20 mb-3">
        <a-icon slot="prefix" type="filter" />
      </a-input>
      <a-select allowClear v-model="logLevel.selected" placeholder="日志级别" class="min-w-150" @change="fetchData">
        <a-select-option v-for="item in logLevel.list" :key="item.key" :value="item.key">
          {{item.value}}
        </a-select-option>
      </a-select>
    </div>
    <div slot="content" class="flex flex-col">
      <div v-for="log in logList" :key="log.id" class="flex">
        <a-popover placement="right">
          <template slot="content">
            <p>提示信息</p>
          </template>
          <span
            :class="{
          'flag': true,
          'trace': log.type === 1,
          'debug': log.type === 2,
          'info': log.type === 3,
          'warn': log.type === 4,
          'error': log.type === 5,
          'fatal': log.type === 6
        }"
          >!</span>
        </a-popover>
        <span class="mr-5">[{{log.time}}]</span>
        <span>{{log.content}}</span>
      </div>
      <div class="flex flex-wrap flex-justify-between">
        <div class="mt-10">
          <a-button icon="download">
            本地缓存{{this.pagination.total}}条日志
          </a-button>
        </div>
        <a-pagination
          v-model="pagination.current"
          :page-size-options="pagination.pageSizeOptions"
          :total="pagination.total"
          show-size-changer
          :page-size="pagination.pageSize"
          :hideOnSinglePage="true"
          @change="pageSizeChange"
        >
        </a-pagination>
      </div>
    </div>
  </page>
</template>

<script>
  export default {
    name: "RealTimeLog",
    data () {
      return {
        logLevel: {
          selected: undefined,
          list: [
            {
              key: 0,
              value: '--All--'
            },
            {
              key: 1,
              value: 'Trace'
            },
            {
              key: 2,
              value: 'Debug'
            },
            {
              key: 3,
              value: 'Info'
            },
            {
              key: 4,
              value: 'Warn'
            },
            {
              key: 5,
              value: 'Error'
            },
            {
              key: 6,
              value: 'Fatal'
            }
          ]
        },
        logList: [],
        pagination: {
          current: 1,
          pageSize: 20,
          total: 0,
          pageSizeOptions: ['10', '20', '30', '50', '100']
        },
        keyWords: {
          screenKeywords: '',
          filterKeywords: ''
        }
      }
    },
    mounted () {
      this.fetchData()
    },
    methods: {
      fetchData () {
        let params = {
          current: this.pagination.current,
          size: this.pagination.pageSize,
          type: this.logLevel.selected,
          ...this.keyWords
        }
        this.$api.log.getLogList(params).then(res => {
          if (res?.code === 200) {
            this.logList = res.data.records
            this.pagination.total = res.data.total
          } else {
            this.$message.error(res.userMsg)
          }
        })
      },
      pageSizeChange (current, size) {
        this.pagination.current = current
        this.pagination.pageSize = size
        this.fetchData()
      }
    }
  }
</script>

<style scoped>
  .max-w-300 {
    max-width: 300px;
  }
  .min-w-150 {
    min-width: 150px;
  }
  .mr-20 {
    margin-right: 20px;
  }
  .mr-5 {
    margin-right: 5px;
  }
  .mt-10 {
    margin-top: 10px;
  }
  .mb-3 {
    margin-bottom: 3px;
  }
  .flag {
    display: flex;
    justify-content: center;
    align-content: center;
    cursor: pointer;
    width: 20px;
    max-height: 20px;
    font-size: 12px;
    border-radius: 50%;
    -webkit-transform: scale(0.60);
  }
  .trace {
    border: 1px solid rgb(147, 255, 24);
    color: rgb(147, 255, 24);
  }
  .debug {
    border: 1px solid rgb(255, 24, 197);
    color: rgb(255, 24, 197);
  }
  .info {
    border: 1px solid rgb(24, 144, 255);
    color: rgb(24, 144, 255);
  }
  .warn {
    border: 1px solid rgb(250,173,20);
    color: rgb(250,173,20);
  }
  .error {
    border: 1px solid rgb(245,34,45);
    color: rgb(245,34,45);
  }
  .fatal {
    border: 1px solid rgb(151, 47, 52);
    color: rgb(151, 47, 52);
  }
</style>